<template>
	<custom-header-vue :customTitle="customTitle" :backIcon="false" class="header"></custom-header-vue>
	<view class="content-my" :style="{'top':scrollTop,'height':scrollHeight}">
		<view style="background: var(--bg-center-color);padding: 0rpx 30rpx 
			0rpx 10rpx;box-sizing: border-box;">
			<view class="flex-row flex-ali-cen flex-jus-bet">
				<view class="flex-row flex-ali-cen">
					<uni-icons type="contact-filled" size="70" color="var(--white-text)"></uni-icons>
					<view class="f-s-28 flex-col">
						<view class="f-s-28" style="color: var(--white-text);font-weight: 600;">
							{{userInfo.name}}({{hidePhoneNumber(userInfo.phone)}})
						</view>
						<view class="f-s-26 m-t-10" style="color: var(--grey-text);">{{groupInfo.group_name}}</view>
					</view>
				</view>
				<view>
					<text class="f-s-26" style="color: var(--grey-text);">工号：</text>
					<text class="f-s-28" style="color: var(--white-text);">{{userInfo.user_name}}</text>
				</view>
			</view>
		</view>
		<view class="m-t-30 p-l-30 p-r-30" style="background-color: var(--bg-center-color);">
			<view class="flex-row flex-jus-bet p-t-20 p-b-20 flex-ali-cen" @click="updatePassword">
				<view class="flex-row">
					<uni-icons type="compose" size="20" color="var(--grey-text)"></uni-icons>
					<view class="f-s-28 m-l-20" style="color: var(--white-text);font-weight: 500;">修改密码</view>
				</view>
				<view>
					<uni-icons type="right" size="16" color="var(--grey-text)"></uni-icons>
				</view>
			</view>
		</view>
		<view class="p-l-30 p-r-30">
			<view class="line-split"></view>
		</view>
		<view class="p-l-30 p-r-30" style="background-color: var(--bg-center-color);">
			<view class="flex-row flex-jus-bet p-t-20 p-b-20 flex-ali-cen">
				<view class="flex-row flex-ali-cen">
					<uni-icons type="loop" size="20" color="var(--grey-text)"></uni-icons>
					<view class="flex-col">
						<view class="f-s-28 m-l-20" style="color: var(--white-text);font-weight: 500;">自动登录</view>
						<view class="f-s-24 m-l-20 m-t-10" style="color: var(--grey-text);font-weight: 500;">
							自动登录工号：{{userInfo.user_name}}</view>
					</view>
				</view>
				<view>
					<switch @change="switchChange" type="switch" :checked="autoLoginStatus == 1" />
				</view>
			</view>
		</view>
		<view class="p-l-30 p-r-30">
			<view class="line-split"></view>
		</view>
		<view class="p-l-30 p-r-30" style="background-color: var(--bg-center-color);" @click="clearStore">
			<view class="flex-row flex-jus-bet p-t-20 p-b-20 flex-ali-cen">
				<view class="flex-row">
					<uni-icons type="trash" size="20" color="var(--grey-text)"></uni-icons>
					<view class="flex-col">
						<view class="f-s-28 m-l-20" style="color: var(--white-text);font-weight: 500;">清理缓存</view>
						<view class="f-s-24 m-l-20 m-t-10" style="color: var(--grey-text);font-weight: 500;">
							缓存限制：无限制
						</view>
					</view>
				</view>
				<view class="flex-row flex-ali-cen">
					<view class="f-s-26 m-r-10" style="color: var(--grey-text);font-weight: 500;">
						{{storageInfo.size}}
					</view>
					<uni-icons type="right" size="16" color="var(--grey-text)"></uni-icons>
				</view>
			</view>
		</view>
		<view class="p-l-30 p-r-30">
			<view class="line-split"></view>
		</view>
		<view class="p-l-30 p-r-30" style="background-color: var(--bg-center-color);" @click="checkVesion">
			<view class="flex-row flex-jus-bet p-t-20 p-b-20 flex-ali-cen">
				<view class="flex-row">
					<uni-icons type="upload" size="20" color="var(--grey-text)"></uni-icons>
					<view class="f-s-28 m-l-20" style="color: var(--white-text);font-weight: 500;">版本更新</view>
				</view>
				<view class="flex-row flex-ali-cen">
					<view class="f-s-26 m-r-10" style="color: var(--grey-text);font-weight: 500;">当前
						{{systemInfo.appVersion}}
					</view>
					<uni-icons type="right" size="16" color="var(--grey-text)"></uni-icons>
				</view>
			</view>
		</view>
		<view class="p-l-30 p-r-30">
			<view class="line-split"></view>
		</view>
		<view class="p-l-30 p-r-30" style="background-color: var(--bg-center-color);" @click="about">
			<view class="flex-row flex-jus-bet p-t-20 p-b-20 flex-ali-cen">
				<view class="flex-row">
					<uni-icons type="help" size="20" color="var(--grey-text)"></uni-icons>
					<view class="f-s-28 m-l-20" style="color: var(--white-text);font-weight: 500;">关于零点</view>
				</view>
				<view class="flex-row flex-ali-cen">
					<view class="f-s-26 m-r-10" style="color: var(--grey-text);font-weight: 500;">零点娱乐管理系统</view>
					<uni-icons type="right" size="16" color="var(--grey-text)"></uni-icons>
				</view>
			</view>
		</view>
		<view class="m-t-30 p-l-30 p-r-30" style="background-color: var(--bg-center-color);" @click="changeGroup()">
			<view class="flex-row flex-jus-cen p-t-20 p-b-20 flex-ali-cen">
				<view class="f-s-28 m-l-20" style="color: var(--white-text);font-weight: 500;letter-spacing: 4rpx;">切换集团
				</view>
			</view>
		</view>
		<view class=" m-t-20 p-l-30 p-r-30" style="background-color: var(--bg-center-color);" @click="backLogin()">
			<view class="flex-row flex-jus-cen p-t-20 p-b-20 flex-ali-cen">
				<view class="f-s-28 m-l-20" style="color: #ff4b4e;font-weight: 500;letter-spacing: 4rpx;">退出登录</view>
			</view>
		</view>
	</view>
	<bottom-company-vue :footerStyle="footerStyle"></bottom-company-vue>
	<wrap-version-update id="557211668471877" :lines="10" apiUrl="https://app.skunld.net/check/Request.php"
		@finish="updateFinish" @error="updateError" :auto="false" ref="versionRef"></wrap-version-update>
	<tab-bar-vue :act="4"></tab-bar-vue>
</template>

<script>
	import tabBarVue from "@/components/tabBar.vue"
	import customHeaderVue from '@/components/customHeader.vue'
	import bottomCompanyVue from '@/components/bottomCompany.vue'
	import WrapVersionUpdate from "@/uni_modules/wrap-version-update/components/wrap-version-update/wrap-version-update.nvue"
	export default {
		components: {
			customHeaderVue,
			bottomCompanyVue,
			WrapVersionUpdate,
			tabBarVue
		},
		data() {
			return {
				customTitle: '个人中心',
				sure_btn: true,
				scrollTop: '0',
				scrollHeight: '0',
				footerStyle: {
					position: 'absolute',
					bottom: '65px',
					left: 0
				},
				userInfo: this.$commonJs.getUserInfo(),
				groupInfo: this.$commonJs.getGroupInfo(),
				loadStatus: false,
				storageInfo: this.$commonJs.getStorageSize(),
				systemInfo: this.$commonJs.getSystemInfoSync(),
				autoLoginStatus: this.$commonJs.getAutoLoginStatus()
			}
		},

		mounted() {
			const query = uni.createSelectorQuery().in(this)
			const self = this
			query.select(".header")
				.boundingClientRect((data) => {
					self.scrollTop = data.height + 'px'
					let topHeight = data.height + 'px'
					self.scrollHeight = `calc(100vh - ${topHeight} - 50px)`
				})
				.exec();
		},
		onLoad() {

		},
		methods: {
			hidePhoneNumber(phone) {
				if (typeof phone === "string" && phone.length >= 11) {
					return phone.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
				}
				return phone
			},
			checkVesion() {
				this.$refs.versionRef.check()
			},
			updateFinish(e) {
				if (e.version > this.systemInfo.appVersion) {

				} else {
					this.$commonJs.showMessage('当前已是最新版本~')
				}
			},
			updateError(e) {
				this.$commonJs.showMessage('更新请求出错~')
			},
			updatePassword() {
				this.$commonJs.showMessage('此功能暂未开放~')
			},
			clearStore() {
				this.$commonJs.showMessage('此功能暂未开放~')
			},
			switchChange(e) {
				let status = e.detail.value ? 1 : 2
				uni.setStorageSync('autoLogin', status)
				this.$commonJs.systemConfig.autoLogin = status
				this.autoLoginStatus = status
				if (status == 1) {
					this.$commonJs.showMessage('已切换自动登录~')
				}
			},
			about() {
				uni.navigateTo({
					url: '/pages/about/about'
				})
			},
			changeGroup() {
				this.$commonJs.hrefBind()
			},
			backLogin() {
				const self = this
				self.$commonJs.clearStorage('userInfo', function(res) {
					self.$commonJs.hrefLogin()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content-my {
		position: absolute;
		width: 100vw;
		box-sizing: border-box;
	}
</style>